<template>
  <div class="processing-status">
    <el-dialog
      v-model="visible"
      :title="title"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
      width="400px"
    >
      <div class="status-content">
        <el-progress
          :percentage="progress"
          :status="status"
          :stroke-width="15"
        />
        <p class="status-message">{{ message }}</p>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElNotification } from 'element-plus'

const visible = ref(false)
const progress = ref(0)
const status = ref<'success' | 'exception' | ''>('')
const title = ref('处理中')
const message = ref('')

// 音频通知
const successAudio = new Audio('/sounds/success.mp3')
const errorAudio = new Audio('/sounds/error.mp3')

const showProgress = (msg: string = '正在处理中...') => {
  visible.value = true
  message.value = msg
  status.value = ''
  progress.value = 0
}

const updateProgress = (value: number, msg?: string) => {
  progress.value = Math.min(Math.max(value, 0), 100)
  if (msg) {
    message.value = msg
  }
}

const completeProgress = (success: boolean = true, msg?: string) => {
  progress.value = 100
  status.value = success ? 'success' : 'exception'
  message.value = msg || (success ? '处理完成' : '处理失败')
  
  // 播放音效并显示通知
  const audio = success ? successAudio : errorAudio
  audio.play().catch(() => {}) // 忽略可能的自动播放限制错误
  
  ElNotification({
    title: success ? '完成' : '错误',
    message: message.value,
    type: success ? 'success' : 'error',
    duration: 3000
  })
  
  setTimeout(() => {
    visible.value = false
    progress.value = 0
    status.value = ''
  }, 1500)
}

defineExpose({
  showProgress,
  updateProgress,
  completeProgress
})
</script>

<style scoped>
.status-content {
  padding: 20px;
}

.status-message {
  margin-top: 15px;
  text-align: center;
  color: #606266;
}
</style> 